<template>
  <div>
    <div class="title">猜你喜欢</div>
    <ul>
      <router-link
        tag="li"
        :to="'/detail/'+item.id"
        class="item border-bottom"
        v-for="item of recommendList"
        :key="item.id"
      >
        <img class="item-img" :src="item.imgUrl" />

        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-comment">
            {{item.comment}}
            <span>条评论</span>
          </p>

          <p class="item-price">
            <span>
              ¥
              <em class="item-price-num">{{item.price}}</em>
            </span>起
            <span class="item-address">{{item.address}}</span>
          </p>

          <div class="item-feature">{{item.feature}}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'homeReco',
  props: {
    recommendList: Array
  }

}
</script>
<style lang="stylus" scoped>
.title {
  margin-top: 0.2rem;
  line-height: 0.8rem;
  background: #eee;
  text-indent: 0.15rem;
}

.item {
  display: flex;
  overflow: hidden;
  height: 3rem;

  .item-img {
    width: 1.95rem;
    height: 1.95rem;
    padding: 0.1rem;
  }

  .item-info {
    flex: 1;
    padding: 0.08rem;

    .item-title {
      line-height: 0.6rem;
      padding-top: 0.05rem;
      font-size: 0.4rem;
    }

    .item-comment {
      line-height: 0.6rem;
      padding: 0.05rem;
      font-size: 0.05rem;
      color: #61;
    }

    .item-address {
      margin-left: 2.5rem;
      padding-right: 0;
      color: #61;
    }

    .item-price {
      color: #FF8300;
      margin-top: 0.1rem;

      .item-price-num {
        font-size: 0.5rem;
      }
    }

    .item-feature {
      background: #fff9f9;
      display: inline-block;
      color: red;
      line-height: 0.3rem;
      margin-top: 0.38rem;
      font-size: 0.2rem;
    }
  }
}
</style>
